<template>
  <el-dialog
    :visible="visible"
    :before-close="handleClose"
    :close="handleClose"
    :show-close="true"
    :class="{'global-mobile-dialog': showMobilePage}"
    class="small-common-dialog-size set-dialog"
  >
    <SectionTitle title="监测设置" style="margin-bottom:24px">
      <span class="tip-text">注意：无效链接将无法正常采集。</span>
    </SectionTitle>
    <el-form
      ref="setForm"
      :rules="rules"
      :model="formData"
      class="form"
      size="small"
      label-position="top"
      style="margin-left: 8px"
      label-width="110px">
      <el-form-item prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="0"><span style="font-size:13px;">监测</span></el-radio>
          <el-radio :label="1"><span style="font-size:13px;">暂停</span></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="center">
      <el-button
        :disabled="loading"
        :loading="loading"
        type="primary"
        size="small"
        @click="handleSubmit"
      >
        确定
      </el-button>
      <el-button
        type="info"
        size="small"
        class="cancel-btn-style"
        @click="handleClose"
      >取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import SectionTitle from '@/components/Title';
import { mapState } from 'vuex';

export default {
  components: {
    SectionTitle
  },
  data() {
    return {
      formData: {
        status: 0
      },
      visible: false,
      loading: false
    };
  },
  computed: {
    rules() {
      return {
        'status': [{ required: true, message: '请选择状态', trigger: 'blur' }]
      };
    },
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    openDialog(id, status) {
      if (id) this.formData.ids = String(id);
      if (status || status === 0) {
        this.formData.status = status;
      } else {
        const localStatus = sessionStorage.getItem('monitoringStatus');
        if (localStatus) {
          this.formData.status = Number(localStatus);
        }
      }
      this.visible = true;
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleClose() {
      this.formData.status = '';
      this.visible = false;
      this.cancelLoading();
      delete this.formData.ids;
      // this.$refs['setForm'].resetFields();
    },
    handleSubmit() {
      this.$refs['setForm'].validate(valid => {
        if (valid) {
          this.loading = true;
          sessionStorage.setItem('monitoringStatus', this.formData.status);
          this.$emit('submit', this.formData);
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.set-dialog {
  ::v-deep {
    .el-radio__label {
      font-size: 14px;
    }
  }
  .center{
    display: flex;
    justify-content: center;
  }
  .tip-text {
    color: #999;
    font-size: 12px;
    font-weight: normal;
    margin-left: 6px;
  }
}
</style>
